<template>
    <div>
<van-nav-bar
  title="详情页"
  left-text="返回"
  left-arrow
  @click-left="()=>{$router.push('/goods')}"
/>
<!-- 富文本 -->
<div v-html="detail.goods_introduce"></div>
<van-action-bar>
  <van-action-bar-icon icon="chat-o" text="客服" dot />
  <van-action-bar-icon icon="cart-o" text="购物车" badge="5" />
  <van-action-bar-icon icon="shop-o" text="店铺" badge="12" />
  <van-action-bar-button type="warning" text="加入购物车" @click="addshop"/>
  <van-action-bar-button type="danger" text="立即购买" />
</van-action-bar>

    </div>
</template>

<script setup>
import { ref } from 'vue';
import {detailApi} from '../request/api'
import {useRoute,useRouter} from 'vue-router'
import { showToast } from 'vant';
const route=new useRoute()
const router=new useRouter()
import { useCounterStore } from '../store/storeCart'
// 可以在组件中的任意位置访问 `store` 变量 ✨
const store = useCounterStore()
//富文本
const detail=ref({})
detailApi(route.params.goods_id).then(res=>{
    console.log('商品详情',res)
    detail.value=res.data.message
})
//加入购物车
const addshop=()=>{
    let token=localStorage.getItem('token')
    if(!token){
        showToast({
            type:'fail',
            message:'请先登录',
            duration:1500,
            onClose(){
                router.push('/login')
            }
        })
    }else{
        store.addcart(detail.value,route.params.goods_id)
        router.push('/home/shopping')
    }
}
</script>

<style lang="scss" scoped>

</style>